<template>
  <Layout>
    <SearchCommon
      :form="state.query"
      :queryInfo="state.queryInfo"
    ></SearchCommon>
  </Layout>
</template>

<script>
export default{
  name:'page3'
}
</script>

<script setup>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const layout = ref(null);

const store = useStore();
const router = useRouter();

const state = reactive({
  query: {
    value1: "",
    time: "",
    value3: "",
  },
  queryInfo: {
    value1: {
      type: "select",
      label: "项目1",
      // multiple: false,
      options: [],
      change: (value, label) => {
        // console.log(value);
        if (value == 2) {
          // if (value.includes(2)) {
          state.query.value3 = 2;
        } else {
          state.query.value3 = "";
        }
      },
    },
    value2: {
      type: "datetime",
      label: "项目2",
    },
    value3: {
      type: "select",
      label: "项目3",
      disabled: true,
      options: [
        {
          value: 1,
          label: "值1",
        },
        {
          value: 2,
          label: "值2",
        },
      ],
    },
    value4: {
      type: "input",
      label: "项目2",
      maxlength: 50,
    },
  },
});

onMounted(() => {
  // 获取在子组件中定义的属性或方法
  // console.log(layout.value.proxy.$utils);
  // console.log(layout.value.proxy.$filters);
  // console.log(layout.value.proxy);
  setTimeout(() => {
    state.queryInfo.value1.options = [
      {
        value: 1,
        label: "选择1",
      },
      {
        value: 2,
        label: "选择2",
      },
    ];
  }, 1000);
});
</script>

<style lang="scss" scoped></style>
